<template>
  <el-row :gutter="40">
    <el-col :lg="24">
      <el-form
          :inline="true"
          :model="queryParams"
          class="filter-form-inline"
          label-position="right"
          size="small"
      >
        <el-row :gutter="40" style="margin-left: 0px; margin-right: 0px">
          <el-col :lg="6" :xs="8">
            <el-form-item label="关键字" style="width: 100%">
              <el-input
                  v-model="queryParams.keyWord"
                  clearable
                  placeholder="输入名称、编号"
              />
            </el-form-item>
          </el-col>
          <el-col :lg="6" :xs="8">
            <el-form-item style="width: 100%">
              <el-button class="border-btn" @click="handlReset">重置</el-button>
              <el-button class="main-btn" type="primary" @click="handlSearch">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-col>
  </el-row>
  <table-view
      :cell-style="cellStyle"
      :data="tableData"
      border
      header-cell-class-name="table-header"
      size="medium"
      @sort-change="handlSort"
      @row-click="aloneClick"
  >
    <el-table-column
        :show-overflow-tooltip="true"
        header-align="center"
        label="兼职编号"
        prop="agentNumber"
    />
    <el-table-column
        :show-overflow-tooltip="true"
        header-align="center"
        label="兼职名称"
        prop="userName"
    />
    <el-table-column
        :show-overflow-tooltip="true"
        align="center"
        label="创建人"
        prop="creatorName"
    />
    <el-table-column
        :show-overflow-tooltip="true"
        align="center"
        label="创建时间"
        prop="createdAt"
        sortable="custom"
    >
      <template #default="{row}">
        {{ dateFormat("yyyy-mm-dd HH:MM:SS", row.createdAt) }}
      </template>
    </el-table-column>
    <el-table-column :show-overflow-tooltip="true" align="center" label="兼职状态">
      <template #default="{row}">
        {{ getLabel('agent_status_person', row.agentStatus) }}
      </template>
    </el-table-column>
    <!--    <el-table-column-->
    <!--      label="操作"-->
    <!--      align="center"-->
    <!--    >-->
    <!--      <template #default="{row}">-->
    <!--        <el-button type="text" @click="handlChange(row)">完善资质-->
    <!--        </el-button>-->
    <!--      </template>-->
    <!--    </el-table-column>-->
  </table-view>
  <Pagination
      v-model:limit="queryParams.pageSize"
      v-model:page="queryParams.page"
      :total="total"
      style="display: flex; justify-content: flex-end"
      @pagination="handlList"
  />
  <!--新建潜在代理商 -->
  <agentDialog
      ref="agentDialog"
      :type-title="typeTitle"
      @succsess="succsess"
  />
</template>

<script>
import {inject, onMounted, reactive, toRefs,} from 'vue'
import {useRouter} from 'vue-router'

export default {
  name: 'Signing',
  components: {},
  setup() {
    const api = inject('api')
    const router = useRouter()
    var data = reactive({
      queryParams: {
        keyWord: '',
        pageSize: 20,
        page: 1,
        agentType: 'agent_person',
        from: '2',
        tradeStatus: '2',
      },
      tableData: [],
      total: 0,
    })

    // 获取列表
    const handlList = () => {
      api.channelAgent.POTENTIALAGENT_LIST(data.queryParams).then((res) => {
        if (res.code === 0) {
          data.tableData = res.data.list || []
          data.total = res.data.total
        }
      })
    }

    const handlReset = () => {
      data.queryParams = {
        keyWord: '',
        pageSize: 20,
        page: 1,
        agentType: 'agent_person',
        from: '2',
        tradeStatus: '2',
      }
      handlList()
    }

    // 搜索
    const handlSearch = () => {
      data.queryParams.page = 1
      handlList()
    }

    // 单机表格
    const aloneClick = (row, column, event) => {
      if (column.label === '操作' || column.label === '查看文件') return
      router.push({
        path: '/marketing/cooperationInformation/partTimeBigBag/signing',
        query: {id: row.id},
      })
    }

    // 鼠标样式
    const cellStyle = () => {
      return 'cursor:pointer;'
    }

    //* **************************************
    onMounted((_) => {
      handlList()
    })
    //* **************************************
    return {
      ...toRefs(data),
      handlReset,
      handlSearch,
      aloneClick,
      cellStyle,
      handlList,
    }
  },
}
</script>

<style scoped>
/* @import url(); 引入css类 */
</style>
